template-editor, [data-is="template-editor"], behavior-editor, [data-is="behavior-editor"]
    .aNav
        border-bottom-left-radius 0
        border-bottom-right-radius 0
        flex-grow 0
        & + div
            left 0
            right 0
            top 0
            bottom 0
            position relative
        @media (max-width 800px)
            li span
                display none
    .tabbed
        height 100%
        box-sizing border-box
        position absolute
        top 0
        right 0
        left 0
        bottom 0
        padding 0
        overflow visible
        border-top 0
        .aCodeEditor
            position absolute
            left 0
            top 0
            right 0
            bottom 0
    .tabwrap
        height 100%
    display flex
    flex-flow row nowrap
    padding 1rem

template-editor, behavior-editor
    .&-Properties
        flex 0 0 19rem
        margin 0 1rem
        overflow hidden
        &:first-child
            flex 0 0 20rem
        &.alt
            flex 0 0 19rem
    .&-aCodeEditor
        flex 1 1 auto
    .&-aSlidingEventListIcon
        position absolute
        left 0.87rem
        bottom @left
        z-index 2
        opacity 0.5
        {transshort}
    .&-aSlidingEventList
        width 3.25rem
        flex 0 0 auto
        position relative
        overflow visible
        & > .aPanel
            width 3.25rem
            z-index 2
            overflow-x hidden
            {trans}
            .flexfix-footer button, .event-list-scriptable-LocalVars
                opacity 0
                {trans}
        &:hover .template-editor-aSlidingEventListIcon
            opacity 0
        &:hover > .aPanel
            position absolute
            left 0
            top 0
            bottom 0
            width 22rem
            {shadamb}
            .flexfix-footer button, .event-list-scriptable-LocalVars
                opacity 1
    .&-aSlidingEventListWrap
        width 22rem
        & > event-list-scriptable
            .aMenu > li
                & > svg, & > img
                    &:first-child
                        margin-right 0.8rem
            & > .flexfix-footer
                padding 1rem
    .&-aPresentationButton
        position absolute
        right 0
        top 0
        border-top-right-radius 0
        border-top-left-radius 0
        border-bottom-right-radius 0
        margin 0

.template-editor-Properties, .behavior-editor-Properties, room-properties
    .anInsetPanel
        margin 0 -1rem
        .collapsible-section-aWrapper, .collapsible-section-aHeader
            padding-left 1rem
            padding-right 1rem
        &.opened
            border-bottom 1px solid borderBright
            padding-bottom 0.5rem

.aNinePatchGrid
    display grid
    gap 2px
    border 2px solid borderBright
    border-radius 1.5rem
    grid-template-columns 1fr 1fr 1fr
    grid-template-rows 1fr 1fr 1fr
    align-items center
    justify-items center
    aspect-ratio 1
    background linear-gradient(
        to bottom,
        transparent 0 33%,
        borderBright 33% 34%,
        transparent 34% 66%,
        borderBright 66% 67%,
        transparent 67% 100%
    ), linear-gradient(
        to right,
        backgroundDeeper 0 33%,
        borderBright 33% 34%,
        backgroundDeeper 34% 66%,
        borderBright 66% 67%,
        backgroundDeeper 67% 100%
    )
.aNinePatchElement
    width 2.5rem
    &.top
        grid-column 2
        grid-row 1
    &.left
        grid-column 1
        grid-row 2
    &.bottom
        grid-column 2
        grid-row 3
    &.right
        grid-column 3
        grid-row 2
